<!--用户工作台-->
<template>
  <Navbar style="margin-bottom: 88px"></Navbar>
  <n-layout class="user-dashboard" style="margin: 0 24px;">
    <n-layout-header style="height: 64px; background: #fff;">
      <div class="header-title" style="font-weight: bold;font-size: 30px;background-color:#EDEFF0">用户工作台</div>
    </n-layout-header>
    <n-layout has-sider>
      <n-layout-sider width="200" style="background: #f0f2f5;">
        <n-menu
          :options="menuOptions"
          @select="handleMenuSelect"
          :value="selectedMenu"
          style="height: 100%; border-right: 1px solid #e0e0e0;"
        />
      </n-layout-sider>
      <n-layout-content style="padding: 24px; background: #fff;">
        <div class="content-wrapper">
          <component :is="currentComponent" />
        </div>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { NLayout, NLayoutHeader, NLayoutSider, NLayoutContent, NMenu } from 'naive-ui'
import UserDashboardWelcome from '@/components/user/userDashboard/UserDashboardWelcome.vue'
import PointsBalance from '@/components/user/userDashboard/PointsBalance.vue'
import TokenSecret from '@/components/user/userDashboard/TokenSecret.vue'
import ApiAccessStatistics from '@/components/user/userDashboard/ApiAccessStatistics.vue'
import Navbar from '@/components/Navbar.vue'

export default defineComponent({
  components: {
    Navbar,
    NLayout,
    NLayoutHeader,
    NLayoutSider,
    NLayoutContent,
    NMenu,
    UserDashboardWelcome,
    PointsBalance,
    TokenSecret,
    ApiAccessStatistics
  },
  setup() {
    const currentComponent = ref('UserDashboardWelcome')
    const selectedMenu = ref('welcome')

    const menuOptions = [
      {
        label: '欢迎页',
        key: 'welcome'
      },
      {
        label: '积分余额',
        key: 'points'
      },
      {
        label: '秘钥管理',
        key: 'token'
      },
      {
        label: '接口访问统计',
        key: 'api-stats'
      }
    ]

    const handleMenuSelect = (key: string) => {
      selectedMenu.value = key
      switch (key) {
        case 'welcome':
          currentComponent.value = 'UserDashboardWelcome'
          break
        case 'points':
          currentComponent.value = 'PointsBalance'
          break
        case 'token':
          currentComponent.value = 'TokenSecret'
          break
        case 'api-stats':
          currentComponent.value = 'ApiAccessStatistics'
          break
        default:
          break
      }
    }

    return {
      currentComponent,
      selectedMenu,
      menuOptions,
      handleMenuSelect
    }
  }
})
</script>

<style scoped>
.user-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 24px;
}

.header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 500px; /* 设置一个最小高度，确保右边内容高度一致 */
  padding: 24px;
  background: #f0f2f5;
  border-radius: 8px;
}

.n-menu {
  height: 100%;
}

.n-menu-item {
  transition: background-color 0.3s;
}

.n-menu-item:hover,
.n-menu-item-active {
  background-color: #e6f7ff;
}

</style>
